<script setup lang="ts">
import { dealDataExcept, formatDate } from "@/utils/common";
import { computed, ref, watch } from "vue";
defineOptions({
  name: "ShowAchiev"
});

// 传值
const props = defineProps({
  moduleData: {
    type: Object,
    default: null
  },
  listMaxHeight: {
    type: String,
    default: "2500px"
  }
});

// 搜索
const projectBoxRef = ref();
const projectList = ref([]);
const searchform = ref({
  birthday: ""
});
const onSearch = () => {
  console.log("refonSearchresh");
};

const resetForm = () => {
  console.log("refresh");
};

const tabType = ref("all");
const tabList = ref([
  { label: "全部", name: "all", count: 0 },
  { label: "横向项目", name: "hxxm", count: 0 },
  { label: "纵向项目", name: "zxxm", count: 0 },
  { label: "论文", name: "lw", count: 0 },
  { label: "专利", name: "zl", count: 0 },
  { label: "科研获奖", name: "qtkjhj", count: 0 },
  { label: "成果转化", name: "cgzh", count: 0 }
]);

const dealProjectList = data => {
  let tempProjectList = [];
  if (data?.horizontalProjects) {
    tempProjectList = tempProjectList.concat(
      data.horizontalProjects.map(v => {
        v.title = v.verticalProjectName;
        v.typeKey = "hxxm";
        v.typeName = "横向项目";
        v.pr = "65";
        return v;
      })
    );
  }
  if (data?.longitudinalProjects) {
    tempProjectList = tempProjectList.concat(
      data.longitudinalProjects.map(v => {
        v.title = v.verticalProjectName;
        v.typeKey = "zxxm";
        v.typeName = "纵向项目";
        v.pr = "65";
        return v;
      })
    );
  }
  if (data?.papers) {
    tempProjectList = tempProjectList.concat(
      data.papers.map(v => {
        v.title = v.paperName;
        v.typeKey = "lw";
        v.typeName = "论文";
        v.pr = "50";
        return v;
      })
    );
  }
  if (data?.patents) {
    tempProjectList = tempProjectList.concat(
      data.patents.map(v => {
        v.title = v.patentName;
        v.typeKey = "zl";
        v.typeName = "专利";
        v.pr = "50";
        return v;
      })
    );
  }
  if (data?.otherObtainRewards) {
    tempProjectList = tempProjectList.concat(
      data.otherObtainRewards.map(v => {
        v.title = v.rewardName;
        v.typeKey = "qtkjhj";
        v.typeName = "科研获奖";
        v.pr = "105";
        return v;
      })
    );
  }

  if (data?.transformations) {
    tempProjectList = tempProjectList.concat(
      data.transformations.map(v => {
        v.title = v.patentName;
        v.typeKey = "cgzh";
        v.typeName = "成果转化";
        v.pr = "105";
        return v;
      })
    );
  }
  projectList.value = tempProjectList;
};

const showProjectList = computed(() => {
  let tempList = projectList.value;
  if (tabType.value != "all") {
    tempList = projectList.value.filter(v => v.typeKey == tabType.value);
  }
  return tempList;
});

const tabChange = () => {
  projectBoxRef.value.scrollTop = 0;
};

const dealShowList = async data => {
  // 处理 tab count
  let tempTabList = [
    { label: "全部", name: "all", count: 0 },
    {
      label: "横向项目",
      name: "hxxm",
      count: data?.horizontalProjects?.length || 0
    },
    {
      label: "纵向项目",
      name: "zxxm",
      count: data?.longitudinalProjects?.length || 0
    },
    { label: "论文", name: "lw", count: data?.papers?.length || 0 },
    { label: "专利", name: "zl", count: data?.patents?.length || 0 },
    {
      label: "科研获奖",
      name: "qtkjhj",
      count: data?.otherObtainRewards?.length || 0
    },
    {
      label: "成果转化",
      name: "cgzh",
      count: data?.transformations?.length || 0
    }
  ];
  let total = tempTabList
    .map(v => v.count)
    .reduce((prev, curr) => prev + curr, 0);
  tempTabList[0].count = total;
  tabList.value = tempTabList;

  // 处理集合
  dealProjectList(data);
};

watch(
  () => props.moduleData,
  async newValue => {
    if (newValue && newValue.id) {
      dealShowList(newValue);
    }
  },
  { immediate: true }
);
</script>

<template>
  <div>
    <div class="card-title">科研成果</div>
    <!-- <el-form :inline="true" :model="searchform" class="mb-1">
        <el-form-item label="授权日期" prop="name" class="!mr-5">
          <el-date-picker
            v-model="searchform.birthday"
            type="date"
            placeholder="请选择"
            value-format="YYYY-MM-DD"
            class="!w-[245px]"
          />
        </el-form-item>
        <el-form-item class="!mr-0">
          <el-button type="primary" :loading="loading" @click="onSearch()">
            搜索
          </el-button>
          <el-button @click="resetForm()"> 重置 </el-button>
        </el-form-item>
      </el-form> -->
    <!-- tabs -->
    <el-tabs v-model="tabType" class="tabs" @tabChange="tabChange">
      <el-tab-pane
        v-for="(item, index) in tabList"
        :key="index"
        :name="item.name"
      >
        <template #label>
          <span>{{ item.label }}</span>
          <span v-if="item.count" class="pl-1"> {{ item.count }}</span>
        </template>
      </el-tab-pane>
    </el-tabs>
    <!-- 列表 -->
    <div
      ref="projectBoxRef"
      class="project-box"
      :style="{ maxHeight: listMaxHeight || '' }"
    >
      <div
        v-for="(item, index) in showProjectList"
        :key="index"
        class="project"
      >
        <h4 class="mb-1" :style="{ paddingRight: item.pr + 'px' }">
          {{ item.title || "--" }}
        </h4>
        <div class="type-name">
          {{ item.typeName || "--" }}
        </div>
        <el-form class="project-form" label-width="70px" label-position="left">
          <template v-if="['zxxm', 'hxxm'].includes(item.typeKey)">
            <div class="flex">
              <el-form-item
                label="项目负责人"
                class="flex-1"
                label-width="90px"
              >
                <div>{{ item.projectMasterName || "--" }}</div>
              </el-form-item>

              <el-form-item label="状态" class="flex-1">
                <el-tag v-if="item.status == 2" type="success" size="small"
                  >已完成</el-tag
                >
                <el-tag v-else type="primary" size="small">进行中</el-tag>
              </el-form-item>
            </div>
            <el-form-item
              :label="item.typeKey == 'zxxm' ? '项目级别' : '甲方单位'"
              class="flex-1"
            >
              <div>{{ item.level || "--" }}</div>
            </el-form-item>
            <div class="flex">
              <el-form-item label="项目金额" class="flex-1">
                <div>
                  {{ dealDataExcept(item.contractPrice) || "--" }}
                  <span v-if="item.contractPrice">万元</span>
                </div>
              </el-form-item>
              <el-form-item label="到账金额" class="flex-1">
                <div>
                  {{ dealDataExcept(item.accountPrice) || "--" }}
                  <span v-if="item.accountPrice">万元</span>
                </div>
              </el-form-item>
            </div>
          </template>
          <!-- 论文 -->
          <template v-else-if="item.typeKey == 'lw'">
            <div class="flex">
              <el-form-item
                label="论文收录类别"
                class="flex-1"
                label-width="100px"
              >
                <div>
                  {{ item.includeLevel || "--" }}
                </div>
              </el-form-item>
              <el-form-item label="状态" class="flex-1">
                <el-tag v-if="item.status == 2" type="success" size="small"
                  >已完成</el-tag
                >
                <el-tag v-else type="primary" size="small">进行中</el-tag>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="第一作者" class="flex-1">
                <div>
                  {{ item.firstAuthor || "--" }}
                </div>
              </el-form-item>
              <el-form-item label="通讯作者" class="flex-1">
                <div>
                  {{ item.correspondingAuthor || "--" }}
                </div>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="录用日期" class="flex-1 items-start">
                <div class="w-[82px]">
                  {{ formatDate(item.hireDate, "--") }}
                </div>
              </el-form-item>
              <el-form-item label="见刊日期" class="flex-1 items-start">
                <div class="w-[82px]">
                  {{ formatDate(item.seeDate, "--") }}
                </div>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="检索日期" class="flex-1 items-start">
                <div class="w-[82px]">
                  {{ formatDate(item.searchDate, "--") }}
                </div>
              </el-form-item>
              <el-form-item label="获奖" class="flex-1">
                <div>{{ item.obtainReward || "--" }}</div>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item
                label="是否第一单位"
                label-width="100px"
                class="flex-1"
              >
                <div>
                  {{
                    item.firstUnit ? (item.firstUnit == 1 ? "是" : "否") : "--"
                  }}
                </div>
              </el-form-item>
            </div>
          </template>
          <!-- 专利 -->
          <template v-else-if="item.typeKey == 'zl'">
            <div class="flex">
              <el-form-item label="专利类型" class="flex-1">
                {{ item.patentType || "--" }}
              </el-form-item>
              <el-form-item label="状态" class="flex-1">
                <el-tag v-if="item.status == 2" type="success" size="small"
                  >已完成</el-tag
                >
                <el-tag v-else type="primary" size="small">进行中</el-tag>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="受理日期" class="flex-1 items-start">
                <div class="w-[82px]">
                  {{ formatDate(item.acceptanceDate, "--") }}
                </div>
                <!-- <div
                    class="cursor-pointer text-xs"
                    :style="{
                      color: item.acceptanceFiles ? '#409eff' : '#999'
                    }"
                    @click="openFilePreview(item.acceptanceFiles)"
                  >
                    查看附件
                  </div> -->
              </el-form-item>
              <el-form-item label="下达日期" class="flex-1 items-start">
                <div class="w-[82px]">
                  {{ formatDate(item.issueDate, "--") }}
                </div>
              </el-form-item>
            </div>

            <div class="flex">
              <el-form-item label="授权日期" class="flex-1 items-start">
                <div class="w-[82px]">
                  {{ formatDate(item.authorizeDate, "--") }}
                </div>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="奖项级别" class="flex-1 items-start">
                <div class="w-[82px]">
                  {{ item.rewardLevel || "--" }}
                </div>
              </el-form-item>
              <el-form-item label="获奖时间" class="flex-1">
                <div>
                  {{ formatDate(item.obtainDate, "--") }}
                </div>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="转化金额" class="flex-1 items-start">
                <div class="w-[82px]">
                  {{ dealDataExcept(item.transformPrice) || "--" }}
                  <span v-if="item.transformPrice">万元</span>
                </div>
              </el-form-item>
            </div>
          </template>
          <!-- 科研获奖 -->
          <template v-else-if="item.typeKey == 'qtkjhj'">
            <div class="flex">
              <el-form-item label="奖励名称" class="flex-1">
                <div>
                  {{ item.rewardName || "--" }}
                </div>
              </el-form-item>
              <el-form-item label="获奖级别" class="flex-1">
                <div>
                  {{ item.level || "--" }}
                </div>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="授奖单位" class="flex-1">
                <div>
                  {{ item.rewardUnit || "--" }}
                </div>
              </el-form-item>
              <el-form-item label="获奖日期" class="flex-1">
                <div>
                  {{ formatDate(item.obtainDate, "--") }}
                </div>
              </el-form-item>
            </div>
            <el-form-item label="获得积分" class="flex-1">
              <div>
                {{ item.score || "--" }}
              </div>
            </el-form-item>
          </template>
          <!-- 转化成果 -->
          <template v-else>
            <div class="flex">
              <el-form-item label="专利名称" class="flex-1">
                <div>
                  {{ item.patentName || "--" }}
                </div>
              </el-form-item>
              <el-form-item label="专利类型" class="flex-1">
                <div>
                  {{ item.patentType || "--" }}
                </div>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="受让企业" class="flex-1">
                <div>
                  {{ item.acquisitionCompany || "--" }}
                </div>
              </el-form-item>
              <el-form-item label="转让金额" class="flex-1">
                <div>
                  {{ item.acquisitionPrice || "--" }}
                  <span v-if="item.acquisitionPrice">万元</span>
                </div>
              </el-form-item>
            </div>
            <el-form-item label="获得积分" class="flex-1">
              <div>
                {{ item.score || "--" }}
              </div>
            </el-form-item>
          </template>
        </el-form>
      </div>
      <el-empty v-if="showProjectList.length == 0" description="暂无数据~" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-card__body) {
  padding: 15px;
}
:deep(.tabs .el-tabs__item) {
  padding: 0 12px !important;
}
.el-form-item {
  margin-bottom: 5px;
}
.project-form .el-form-item {
  margin-bottom: -5px;
}
.card-title {
  font-weight: bold;
  margin-bottom: 10px;
}
:deep(.team-form .el-form-item__content) {
  font-weight: bold;
}
:deep(.project-form .el-form-item) {
  font-weight: bold;
}

.project-box {
  flex: 1;
  overflow: auto;
  .project {
    border: 1px solid #c0ebff;
    padding: 12px;
    border-radius: 8px;
    position: relative;
    margin-bottom: 12px;
  }
  .type-name {
    font-size: 13px;
    color: #00618d;
    font-weight: bold;
    position: absolute;
    right: 0;
    top: 10px;
    background-color: #c0ebff;
    padding: 5px 10px;
    border-radius: 15px 0 0 15px;
  }
}
</style>
